<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>game</title>
        <style type="text/css">
            body{
                background-color: black;//设置背景颜色
            }
            .img{
                width: 500px;
                height: 500px;
                position: absolute;//设置绝对位置
				top: 0px;
				left: 50px;
            }
        </style>
    </head>
    <body>
		<img src="img/pet.gif" class="img" alt="">
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <script>
			function Change(){
				$("img").dblclick(function(){//双击变身,dblclick双击
				    $("img").attr("src","img/player2.gif");//一个参数获取，两个参数设置
					
					$("img").dblclick(function(){//再双击还原
						$("img").attr("src","img/pet.gif");
						})
				})
			}
			
			
			//switch实现
			function move(){
				$(window).keydown(function(e){//键盘按下的事件，用e来接收
				    let top = parseInt($("img").css("top"));//将字符串解析成整数
				    let left = parseInt($("img").css("left"));
					switch(e.keyCode){//用于获取代表键盘上的键的数字
						case 87:
						$("img").css("top",top - 50);
						break;
						case 83:
						$("img").css("top",top + 50);
						break;
						case 65:
						$("img").attr("src","img/player_left.gif");
						$("img").css("left",left - 50);
						break;
						case 68:
						$("img").attr("src","img/player_right.gif");
						$("img").css("left",left + 50);
						break;
						default:
						break;	
					}
				})
			}
			
			//if实现
			function move2(){
				$(window).keydown(function(e){
				    let top = parseInt($("img").css("top"));
				    let left = parseInt($("img").css("left"));
					 if(e.keyCode == 87) {
					     $("img").css("top",top - 50);
					 }else if(e.keyCode == 83){
					     $("img").css("top",top + 50);
					 }else if(e.keyCode == 65){
					     $("img").attr("src","img/player_left.gif");
					     $("img").css("left",left - 50);
					 }else if(e.keyCode == 68){
					     $("img").attr("src","img/player_right.gif");
					     $("img").css("left",left + 50);
					 }
				})
			}
			window.onload=function(){
				Change();
				move2();
			}
			

        </script>
    </body>
</html>
